<template>
<div v-if="datas !== undefined">
    <el-drawer
      title="坐标修改"
      :visible.sync="drawer"
      direction="btt"
      size="70%"
      :with-header="false"
    >
      <campus-map-by-position></campus-map-by-position>
    </el-drawer>

    <div style="margin-left: 20px;font-size: 25px;">
        <i class="el-icon-arrow-left" @click="back"></i>
    </div>
    <div class="main">
        <el-button  size="mini" class="el-icon-position" type="warning">其他</el-button>
        <el-button v-if="datas.signRate === '1'" size="mini" class="el-icon-refresh" type="success">循环</el-button>

        <el-row style="margin-top:5px" type="flex" >
        <el-col :span="24"><span>{{ datas.taskName}}</span></el-col>
        </el-row>

        <el-row type="flex" >
        <el-col :span="24"><span class="title-font"><span class="title-color">创建人：</span>{{ datas.senderUserName }}</span></el-col>
        </el-row>

        <el-row v-if="rateSignDate !== null" type="flex" >
        <el-col :span="24"><span class="title-font"><span class="title-color">签到日：</span>{{ rateSignDate }}</span></el-col>
        </el-row>

        <el-row type="flex" >
        <el-col :span="24">
            <span class="title-font">
            <span class="title-color">签到时间段：</span>
            <span v-if="datas.signRate === '1'" >{{ datas.rateTaskBeginTime }} ~ {{ datas.rateTaskEndTime }}</span>
            <span v-else >{{ datas.singleTaskBeginTime }} ~ {{ datas.singleTaskEndTime }}</span>
            </span>
        </el-col>
        </el-row>
        <el-divider></el-divider>

        <el-row type="flex" justify="center" >
            <el-col :span="24">
                <div class="body">
                    
                    <el-row type="flex" justify="center">
                        <div v-if="datas.signPhotoUrl === null " style="width:80%">
                            <span>距离结束：</span>
                            <span style="color: #F19E38;">{{ time }}</span>
                        </div>
                        <div v-else style="width:80%"><el-image :src="datas.signPhotoUrl !== '' ? datas.signPhotoUrl : 'https://feres.cpdaily.com/fe_components/counselor-assets/images/common-result-pos.png'"></el-image></div>
                    </el-row>
                    <div v-if="datas.signAddress !== null">
                        <span class="title-font">{{datas.signAddress}}-->已签到</span>
                    </div>
                    <div v-if="datas.signStatus === '1'" style="margin-top:3vh">
                        <el-button icon="el-icon-success" type="warning">
                            已签到
                            <span v-if="datas.isMalposition === 1">(范围外签到)</span>
                            <!-- <span v-if="datas.isMalposition !== '1'">(范围外签到)!</span> -->
                        </el-button>
                    </div>
                    <!-- <div style="margin-top:20px"><el-button icon="el-icon-position" @click="shwoDrawer" >位置修改</el-button></div> -->
                    <div v-if="datas.signTime !== null " style="margin-top:3vh"><span class="title-font">签到时间：{{ datas.signTime }}</span></div>
                    <div style="margin-top:3vh">
                        <el-button size="small" @click="sign" round>{{datas.signStatus ==='1' ? '更新签到' : '立即签到'}} ></el-button>
                        <el-button size="small" @click="showSignDetail" round>签到信息 ></el-button>
                    </div>
                    
                </div>
            </el-col>
        </el-row>

        <el-dialog
        title="签到附加信息"
        :visible.sync="dialogVisibleStatus"
        width="90%"
        :center="true"
        top="2vh"
        >
        <campus-mission-extra :extras="datas.extraField" @dialogVisible="dialogVisible"></campus-mission-extra>
        <el-button icon="el-icon-position" @click="shwoDrawer" >位置修改</el-button>
        </el-dialog>

    </div>
</div>
</template>

<script>
import CampusMapByPosition from './CampusMapByPosition.vue';
import CampusMissionExtra from './CampusMissionExtra.vue';

export default {
//import引入的组件需要注入到对象中才能使用
components: { CampusMapByPosition, CampusMissionExtra},
props: { datas:{} , rateSignDate: ''},
data() {
//这里存放数据
return {
    dialogVisibleStatus: false,
    time: '',
    drawer: false,
};
},
//计算属性 类似于data概念
computed: {

},
//监控data中的数据变化
watch: {},
//方法集合
methods: {
    // 显示drawer
    shwoDrawer() {
      this.drawer = true;
    },
    dialogVisible(){
        this.dialogVisibleStatus = false;
    },
    deadline() {
        setInterval(() => {
            let dieLineTime = new Date(new Date().toLocaleDateString()).getTime() + 24 * 60 * 60 * 1000;
            let currentTime = new Date().getTime();
            let residueTime = dieLineTime - currentTime;
            let ss = Math.floor(residueTime / 1000);
            let mm = Math.floor(residueTime / 1000 / 60);
            let hh = Math.floor(residueTime / 1000 / 60 /60);
            this.time = `${hh}小时${mm - hh * 60}分钟${ss - (mm - hh * 60) * 60 - (hh * 60 * 60)}秒`;
        },1000)
    },
    back(){
        console.log("返回了");
        this.$emit("refresh");
    },
    sign(){
        setTimeout(() => {
            this.$tips("仅保存问题及答案置服务器，需要点击签到才能签到！","info");
        }, 1);
        // setTimeout(() => {
        //     this.$tips(`剩余更新次数：${this.datas.updateLimit}`,"warning");
        // }, 100);
        this.dialogVisibleStatus = true;
        console.log("签到");

    },
    showSignDetail(){
        this.$message("还没做哦")
        console.log("显示了签到信息")
    },


},
//声明周期 - 创建完成（可以访问当前this实例）
created() {
    this.deadline()
},
//声明周期 - 挂载完成（可以访问DOM元素）
mounted() {},
beforeCreate() {}, //生命周期 - 创建之前
beforeMount() {}, //生命周期 - 挂载之前
beforeUpdate() {}, //生命周期 - 更新之前
updated() {}, //生命周期 - 更新之后
beforeDestroy() {
}, //生命周期 - 销毁之前
destroyed() {}, //生命周期 - 销毁完成
activated() {} //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style scoped>
.main{
    margin: 0 20px 0 20px;
}
.el-button--mini {
    padding: 2px 3px;
    font-size: 12px;
    border-radius: 3px;
}
.title-font{
    font-size: 13px;
    color: #6B7481;
}
.title-color{
    color: #A0A8B4;
}
.body{
    text-align: center;
}
.el-button--warning {
    color: #FFFFFF;
    background-color: #BDA46E;
    border-color: #BDA46E;
}
.el-button--success {
    color: #FFFFFF;
    background-color: #8DD5A9;
    border-color: #8DD5A9;
}
.el-dialog__body {
    padding: 0px 10px;
    color: #606266;
    font-size: 14px;
    word-break: break-all;
}
</style>